<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./bootstrap-5.3.6-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./bootstrap-icons/bootstrap-icons.css">
    <script src="./vue.global.js"></script>
    <script src="./axios.min.js"></script>
    <script src="./echarts.min.js"></script>
    <title>HOME</title>
</head>

<body class="bg-body px-4">
<div id="app" class="container-fluid py-3">
    <div class="d-flex justify-content-around mb-3">
        <div>
            <div class="shadow py-3 mb-2 rounded text-bg-primary d-flex justify-content-center gap-2" style="width: 12rem;">
                <i class="bi bi-flag-fill"></i>
                <div>
                    <div>今日任务</div>
                    <div class="fw-bold fs-5">{{ transDailySummaryData.worktotal }}</div>
                </div>
            </div>
            <div class="shadow py-3 rounded text-bg-primary d-flex justify-content-center gap-2" style="width: 12rem;">
                <i class="bi bi-grid-3x3"></i>
                <div>
                    <div>总库位</div>
                    <div class="fw-bold fs-5">{{ storageWarehouseSummaryData.total }}</div>
                </div>
            </div>
        </div>

        <div>
            <div class="shadow py-3 mb-2 rounded text-bg-success d-flex justify-content-center gap-2" style="width: 12rem;">
                <i class="bi bi-flag-fill"></i>
                <div>
                    <div>已入库</div>
                    <div class="fw-bold fs-5">{{ transDailySummaryData.receivetotal }}</div>
                </div>
            </div>
            <div class="shadow py-3 rounded text-bg-success d-flex justify-content-center gap-2" style="width: 12rem;">
                <i class="bi bi-grid-3x3"></i>
                <div>
                    <div>已用库位</div>
                    <div class="fw-bold fs-5">{{ storageWarehouseSummaryData.workalltotal }}</div>
                </div>
            </div>
        </div>

        <div>
            <div class="shadow py-3 mb-2 rounded text-bg-warning d-flex justify-content-center gap-2" style="width: 12rem;">
                <i class="bi bi-flag-fill"></i>
                <div>
                    <div>已出库</div>
                    <div class="fw-bold fs-5">{{ transDailySummaryData.shiptotal }}</div>
                </div>
            </div>
            <div class="shadow py-3 rounded text-bg-warning d-flex justify-content-center gap-2" style="width: 12rem;;">
                <i class="bi bi-grid-3x3"></i>
                <div>
                    <div>可用库位</div>
                    <div class="fw-bold fs-5">{{ storageWarehouseSummaryData.freetotal }}</div>
                </div>
            </div>
        </div>

        <div>
            <div class="shadow py-3 mb-2 rounded text-bg-danger d-flex justify-content-center gap-2" style="width: 12rem;;">
                <i class="bi bi-flag-fill"></i>
                <div>
                    <div>作业中</div>
                    <div class="fw-bold fs-5">{{ transDailySummaryData.tasktotal }}</div>
                </div>
            </div>
            <div class="shadow py-3 rounded text-bg-danger d-flex justify-content-center gap-2" style="width: 12rem;;">
                <i class="bi bi-grid-3x3"></i>
                <div>
                    <div>空容器</div>
                    <div class="fw-bold fs-5">{{ storageWarehouseSummaryData.workepaltotal }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-6">
            <div class="shadow rounded p-3 border">
                <div id="line-1" style="height:300px;"></div>
            </div>
        </div>
        <div class="col-6">
            <div class="shadow rounded p-3 border">
                <div id="line-2" style="height:300px;"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-6">
            <div class="shadow rounded p-3 border">
                <div id="line-3" style="height:300px;"></div>
            </div>
        </div>
        <div class="col-6">
            <div class="shadow rounded p-3 border">
                <div id="line-4" style="height:300px;"></div>
            </div>
        </div>
    </div>
</div>
<script>

    const webapi = axios.create({
        baseURL: '/api/wms/xcmg/report/kanban',
        timeout: 30000,
    });

    webapi.interceptors.request.use(
        function (requestConfig) {

            return requestConfig;
        },
        function (error) {

            return Promise.reject(error);
        }
    );

    webapi.interceptors.response.use(
        function (res) {
            const resData = res.data;
            // 二进制数据则直接返回
            if (res.request.responseType == "blob" || res.request.responseType == "arraybuffer") {
                return resData;
            }

            const code = resData.code;
            const msg = resData.message;

            if (code == 200) {
                return resData;
            } else if (code == 400) {
                return Promise.reject(msg);
            } else if (code == 500) {
                return Promise.reject(msg);
            } else {
                return Promise.reject("unknown error");
            }
        },
        function (error) {
            console.error(error.message);
            return Promise.reject(error);
        }
    );


    const { createApp, ref, onMounted } = Vue

    createApp({
        setup() {

            onMounted(() => {
                fetchStorageWarehouseSummary();
            fetchTransDailySummary();

            //日出入库/托
            webapi.post('/trans/dailyconssummary', { divisioncode: 'WH101' }).then((response) => {
                var xAxisData = [];
            var receivepaltotalData = [];
            var shippaltotalData = [];
            response.data.forEach(element => {
                xAxisData.push(element.reportdate);
            receivepaltotalData.push(element.receivepaltotal)
            shippaltotalData.push(element.shippaltotal)
        });

            var seriesData = [
                {
                    name: '出库任务',
                    type: 'line',
                    data: shippaltotalData,
                    label: {
                        show: true,
                    },
                },
                {
                    name: '入库任务',
                    type: 'line',
                    data: receivepaltotalData,
                    label: {
                        show: true,
                    },
                },
            ]

            var chart1 = echarts.init(document.getElementById('line-1')).setOption({
                title: {
                    text: '日出入库/托'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    right: '0px',
                    data: ['出库任务', '入库任务']
                },
                grid: {
                    left: '0px',
                    right: '0px',
                    bottom: '0px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: seriesData
            });
        });

            //日出入库/种
            webapi.post('/trans/dailyconssummary', { divisioncode: 'WH101' }).then((response) => {
                var xAxisData = [];
            var receivematerialtotalData = [];
            var shipmaterialtotalData = [];
            response.data.forEach(element => {
                xAxisData.push(element.reportdate);
            receivematerialtotalData.push(element.receivematerialtotal)
            shipmaterialtotalData.push(element.shipmaterialtotal)
        });

            var seriesData = [
                {
                    name: '出库',
                    type: 'bar',
                    data: shipmaterialtotalData,
                    label: {
                        show: true,
                        position: 'top'
                    },
                },
                {
                    name: '入库',
                    type: 'bar',
                    data: receivematerialtotalData,
                    label: {
                        show: true,
                        position: 'top'
                    },
                },
            ]

            var chart3 = echarts.init(document.getElementById('line-3')).setOption({
                title: {
                    text: '日出入库/种'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: { right: '0px', },
                grid: {
                    left: '0px',
                    right: '0px',
                    bottom: '0px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: seriesData
            });
        });

            //库龄统计/托
            webapi.post('/storage/stockeagesumm', { divisioncode: 'WH101' }).then((response) => {
                var xAxisData = [];
            var totalData = [];
            response.data.forEach(element => {
                xAxisData.push(element.typename);
            totalData.push(element.total)
        });

            var chart4 = echarts.init(document.getElementById('line-4')).setOption({
                title: {
                    text: '库龄统计/托'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '0px',
                    right: '0px',
                    bottom: '0px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: totalData,
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top'
                        },
                    }
                ]
            });
        });
        })



            //存储汇总
            const storageWarehouseSummaryData = ref({
                divisionid: null,
                total: '-',
                workalltotal: '-',
                workepaltotal: '-',
                freetotal: '-',
                worktasktotal: '-'
            });
            function fetchStorageWarehouseSummary() {
                webapi.post('/storage/warehousesummary', { divisioncode: 'WH101' }).then((response) => {
                    storageWarehouseSummaryData.value = response.data;

                //货位分布

                var data = [
                    { name: '有货', value: response.data.workalltotal - response.data.workepaltotal },
                    { name: '空容器', value: response.data.workepaltotal },
                    { name: '空库位', value: response.data.freetotal },
                ]
                var chart2 = echarts.init(document.getElementById('line-2')).setOption({
                    title: {
                        text: '货位分布'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        right: '0px',
                    },
                    grid: {
                        left: '0px',
                        right: '0px',
                        bottom: '0px',
                        containLabel: true
                    },
                    series: [
                        {
                            name: '货位分布',
                            type: 'pie',
                            radius: '50%',
                            data: data,
                            label: {
                                formatter: '{b}\n{d}%\n[{c}]', // 显示标签名称和百分比
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            });

            }


            //任务汇总
            const transDailySummaryData = ref({
                worktotal: '-',
                receivetotal: '-',
                shiptotal: '-',
                tasktotal: '-'
            });
            function fetchTransDailySummary() {
                webapi.post('/trans/dailysummary', { divisioncode: 'WH101' }).then((response) => {
                    transDailySummaryData.value = response.data;
            });
            }


            return {
                storageWarehouseSummaryData,
                transDailySummaryData
            }
        }
    }).mount('#app')
</script>
</body>

</html>